<template>
  <div>
    <div class="header">
      <img src="/index/bgtop.png" />
    </div>
    <div class="index">
      <span class="iconfont icon-xiangzuojiantou"></span>
      <router-link to="/products">继续购物</router-link>
    </div>
    <div class="wu" v-show="false">您的购物袋为空</div>
    <div class="car">购物车({{ count }})</div>
    <div class="chooseall" @click="allss">
      <span class="iconfont icon-danxuankuang-weixuanze" v-if="!all"></span>
      <span class="iconfont icon-danxuankuang-yixuanze" v-else></span>
      <span> 全选</span>
    </div>
    <div class="shopcart">
      <div class="shop-item" v-for="(item, index) in product" :key="index">
        <div class="left" @click="changeAc(index)">
          <span
            class="iconfont icon-danxuankuang-weixuanze"
            v-if="!item.active"
          ></span>
          <span class="iconfont icon-danxuankuang-yixuanze" v-else></span>
        </div>
        <div class="imga">
          <img :src="item.pic" />
        </div>
        <div class="right">
          <p>{{ item.name }}</p>
          <span>{{ item.guige }}</span>
          <p>￥{{ item.price }}.00</p>
          <div class="btn-g">
            <i @click="item.count>0?item.count--:''">-</i>
            <input type="text" :value="item.count"/>
            <i @click="item.count++">+</i>
          </div>
          <button @click="delShop(item.id)">删 除</button>
        </div>
      </div>
    </div>
    <div class="jieshuan">
      <span>总价:￥{{ sum }}</span>
      <button>继续购物</button>
      <button>立即购买</button>
      <span class="iconfont icon-xiaoxi"></span>
    </div>
    <Footer />
  </div>
</template>
<script>
import Footer from "../components/Footer.vue";
export default {
  components: { Footer },
  data() {
    return {
      count: 0,
      product: [],
      sum: 0,
      all: false,
    };
  },
  mounted() {
    this.getShopcart();
  },
  updated () {
    this.upCount()
    // this.getShopcart()
  },
  methods: {
    getShopcart() {
      window.scrollTo(0,0)
      let shopcart = this.$store.state.shopcart;
      let count = 0;
      let info;
      shopcart.forEach((item) => {
        count += item.count;
        info = JSON.parse(item.products);
        info.id=item.sid
        info.count=item.count
        info.active = false;
        this.product.push(info);
      });
      // console.log(this.product);
      this.count = count;
    },
    upCount(){
      let count=0
      this.product.forEach(item=>{
        count+=item.count
      })
      this.count=count
    },
    allss() {
      let price=0
      let sum=0
      this.all = !this.all;
      this.product.forEach((item) => {
        item.active = this.all;
        price=item.price
        sum+=item.price*item.count
      });
      if(!this.all){
        this.sum=0
      }else{
        this.sum=sum
      }
    },
    changeAc(index) {
      let sum=0
      let price = this.product[index].price
      let count = this.product[index].count
      this.product[index].active = !this.product[index].active;
      if(this.product[index].active){
        sum=price*count
        this.sum=sum
      }else{
        this.sum=sum
      }
      let i = 0;
      this.product.map((item) => {
        if (item.active) {
          i++;
        }
      });
      if (i === this.product.length) {
        this.all = true;
      } else {
        this.all = false;
      }
    },
    delShop(id){
      this.$dialog.confirm({
        message:`你确定删除吗`,
      }).then(confirm=>{
        this.axios.get(`/product/delshop?sid=${id}`).then(res=>{
          // console.log(res);
          if(res.data.code==200){
            console.log(res.data.msg);
          }
        })
      }).catch(cancel=>{
        console.log('不删了');
      });
    }
  },
};
</script>
<style scoped lang="scss">
a {
  color: black;
}
.header {
  width: 95%;
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid black;
  img {
    width: 50%;
  }
}
.index {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  font-size: 16px;
  background-color: #fafafa;
  font-weight: bold;
}
.wu {
  margin-top: 12px;
  width: 100%;
  font-size: 25px;
  text-align: center;
  font-weight: bold;
}
.car {
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
  font-size: 18px;
}
.chooseall {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  background-color: black;
  color: white;
  position: relative;
  span {
    &:nth-child(2) {
      position: absolute;
      left: 40px;
      top: 0;
    }
  }
}
.shopcart {
  width: 95%;
  margin: 10px auto;
  // border-bottom: 1px solid black;
  padding-bottom: 10px;
  box-sizing: border-box;
  .shop-item {
    width: 100%;
    height: 190px;
    display: flex;
    border-bottom: 1px solid black;
    .left {
      margin-left: 10px;
      line-height: 90px;
      width: 10%;
      text-align: center;
      position: relative;
      span {
        &:last-child {
          position: absolute;
          top: 0;
          left: 7px;
        }
      }
    }
    .imga {
      width:50%;
      margin-top: 10px;
      img {
        width: 100%;
      }
    }
    .right {
      padding-top: 10px;
      width: 48%;
      p {
        font-size: 14px;
        &:nth-child(1) {
          height: 40px;
        }
        &:nth-child(3) {
          margin: 7px 0;
        }
      }
      span {
        font-size: 14px;
      }
      .btn-g {
        line-height: 30px;
        i {
          display: inline-block;
          width: 35px;
          line-height: 35px;
          text-align: center;
          font-size: 20px;
          background-color: #fafafa;
        }
        input {
          height: 30px;
          width: 50px;
        }
      }
      button{
        margin-top: 10px;
        margin-left: 28px;
        font-size: 14px;
        padding:3px 15px;
        // width:60%;
        background-color: black;
        color:white;
        border: 1px solid white;
      }
    }
  }
}
.jieshuan {
  width: 99.7%;
  z-index: 999;
  position: fixed;
  bottom: 0;
  padding: 10px 20px;
  background-color: black;
  height: 50px;
  color: white;
  box-sizing: border-box;
  span {
    display: inline-block;
    &:last-child {
      margin-left: 20px;
      font-size: 20px;
    }
  }
  button {
    font-size: 14px;
    margin-left: 10px;
    &:nth-child(2) {
      padding: 5px 10px;
      background-color: black;
      color: white;
      border: 1px solid white;
    }
    &:nth-child(3) {
      padding: 5px 10px;
      background-color: white;
      color: black;
      border: 1px solid black;
    }
  }
}
</style>
